<template>
  <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
    <div class="logo">
      <google-outlined :style="{ fontSize: '28px', color: '#08c' }" />
      <span class="guanli"> 管理后台</span>
    </div>
    <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
      <div class="xinjian">
        <div class="btn-box">
          <button class="btn">
            <plus-outlined :style="{ fontSize: '18px' }" />
            <span>新建</span>
          </button>
        </div>
      </div>
      <a-menu-item key="1">
        <pie-chart-outlined :style="{ fontSize: '18px' }" />
        <span><router-link to="/staging">工作台</router-link></span>
      </a-menu-item>
      <a-sub-menu key="sub1">
        <template #title
          ><user-outlined :style="{ fontSize: '18px' }" />
          <span> 文章管理 </span>
        </template>
        <router-link to="/all/articles"
          ><a-menu-item key="2">所有文章</a-menu-item></router-link
        >
        <router-link to="/classification/management"
          ><a-menu-item key="3">分类管理</a-menu-item></router-link
        >
        <router-link to="/label/management"
          ><a-menu-item key="4">标签管理</a-menu-item></router-link
        >
      </a-sub-menu>
      <a-menu-item key="5">
        <switcher-outlined :style="{ fontSize: '18px' }" />
        <span class="span"><router-link to="/page">页面管理</router-link></span>
      </a-menu-item>
      <a-menu-item key="6">
        <wallet-outlined :style="{ fontSize: '18px' }" />
        <span
          ><router-link to="/knowledge/booklet"> 知识小册</router-link></span
        >
      </a-menu-item>
      <a-menu-item key="7">
        <star-outlined :style="{ fontSize: '18px' }" />
        <span><router-link to="/poster">海报管理</router-link></span>
      </a-menu-item>
      <a-menu-item key="8">
        <message-outlined :style="{ fontSize: '18px' }" />
        <span><router-link to="/comment">评论管理</router-link></span>
      </a-menu-item>
      <a-menu-item key="9">
        <loading-outlined :style="{ fontSize: '18px' }" />
        <span><router-link to="/mail">邮件管理</router-link></span>
      </a-menu-item>
      <a-menu-item key="10">
        <smile-outlined :rotate="180" :style="{ fontSize: '18px' }" />
        <span><router-link to="/file/management">文件管理</router-link></span>
      </a-menu-item>
      <a-menu-item key="11">
        <sync-outlined spin :style="{ fontSize: '18px' }" />
        <span><router-link to="/search/secords">搜索记录</router-link></span>
      </a-menu-item>
      <a-menu-item key="12">
        <smile-outlined :style="{ fontSize: '18px' }" />
        <span><router-link to="/access/statistics">访问统计</router-link></span>
      </a-menu-item>
      <a-menu-item key="13">
        <setting-filled :style="{ fontSize: '18px' }" />
        <span><router-link to="/user/management">用户管理</router-link></span>
      </a-menu-item>
      <a-menu-item key="14">
        <home-outlined />
        <span><router-link to="/system/settings">系统设置</router-link></span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { useStore } from 'vuex'
import {
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
  StarOutlined,
  HomeOutlined,
  SettingFilled,
  SmileOutlined,
  SyncOutlined,
  LoadingOutlined,
  MessageOutlined,
  WalletOutlined,
  SwitcherOutlined,
  GoogleOutlined,
  PlusOutlined
} from '@ant-design/icons-vue'
export default defineComponent({
  components: {
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
    HomeOutlined,
    SettingFilled,
    SmileOutlined,
    SyncOutlined,
    LoadingOutlined,
    MessageOutlined,
    StarOutlined,
    WalletOutlined,
    SwitcherOutlined,
    GoogleOutlined,
    PlusOutlined
  },
  setup() {
    const store = useStore()
    const collapsed = computed(() => store.state.collapsed)
    return {
      selectedKeys: ref<string[]>(['1']),
      collapsed
    }
  }
})
</script>
<style></style>
